<!--空置预警-->
<template>
  <a-card
    style="height: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1, height: 0}"
  >
    <template #title>
      <cu-icon class="icon-primary" type="org-kongzhi" />
      空置预警
    </template>
    <a-spin :spinning="spinning">
      <div class="chart-box">
        <div class="chart"  id="vacancyWarnEchart"></div>
      </div>
    </a-spin>

  </a-card>
</template>
<script>
import {
  defineComponent,
  computed,
  watch,
  onMounted,
  reactive,
  toRefs,
  onUnmounted,
} from "vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
import _ from "lodash";

export default defineComponent({
  name: "vacancyWarn",
  components: {

  },
  setup(props, context) {

    const state = reactive({
      spinning: false,
      chart: {},
    })

    const renderChart = () => {
      state.spinning = true;
      state.chart = new Chart({
        container: 'vacancyWarnEchart',
        autoFit: true,
        appendPadding: [40, 24, 24, 24],
      });
      state.chart.annotation().text({
        top: true,
        position: ['start', 'end'],
        content: '单位/间',
        style: {
          fill: '#8c8c8c',
          fontWeight: 300,
          fontSize: '12',
        },
        offsetY: -25,
        offsetX: -25,
      })
      state.chart.scale('total', {
        nice: true,
        min: 0,
      });
      state.chart.axis("key", {
        label: {
          rotate: -1,
          offset: 35,
        },
        tickLine: null,
      });
      state.chart.axis('total', {
        grid:{
          line:{
            type:"line",
            style:{
              stroke:"#8c8c8c",
              lineDash:[1,3],//虚线
            }
          },
        },
      });
      state.chart.tooltip({
        showMarkers: false
      });
      state.chart.interaction('active-region');

      state.chart.interval().style({ radius: [20, 20, 0, 0] }).label("total", {
        content: (originData) => {
          return originData["total"]
        },
        style: {
          fill: '#8c8c8c',
          fontWeight: 400,
        },
        position: 'top',
      }).position('key*total').color('name')
        .size(20);

      request
        .get("/org", "/workbench/roomVacantSpread")
        .then((res) => {
          state.chart.changeData(res.list);
          state.chart.render();
          state.spinning = false;
        }).catch((err) => {
          state.spinning = false;
      });

      // 渲染可视化
      state.chart.render();
    }


    onMounted(() => {
      renderChart();
    });

    onUnmounted(() => {
      if (!_.isEmpty(state.chart)) {
        state.chart.destroy();
      }
    })


    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .chart {
    flex: 1;
  }
}
.icon-primary {
  color: @primary-color;
  font-size: 20px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>